<template>
  <div class="container-age">
    <div class="top">
      <p class="title">年龄比例</p>
      <span class="deco"></span>
    </div>
    <div class="age-chart" ref="ageChart" style="height: 200px"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

const ageChart = ref();
const data = [
  { value: 10, name: "10岁以下" },
  { value: 20, name: "10-18岁" },
  { value: 30, name: "18-22岁" },
  { value: 40, name: "22-40岁" },
  { value: 50, name: "40岁以上" },
];
onMounted(() => {
  const mychart = echarts.init(ageChart.value);

  const option = {
    title: {
      text: "本日总数",
      top: "50%",
      left: "17%",
      textStyle: {
        color: "#6370a3",
        fontSize: 16,
        fontWeight: "lighter",
      },
    },
    tooltip: {
      trigger: "item",
      formatter: function (params: any) {
        var value = params.value;
        var percent = ((value / 150) * 100).toFixed(2);
        return params.name + ": " + value + " (" + percent + "%)";
      },
    },
    legend: {
      top: "25%",
      right: 30,
      orient: "vertical",
      textStyle: {
        color: "white",
        fontSize: 14,
      },
      formatter: function (name: any) {
        var item = data.find((item) => item.name === name);
        return name + "  " + Math.round((item!.value / 150) * 100) + "% ";
      },
    },
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      height: "300px",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        top: 0,
        right: 100,
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        width: "230px",
        height: "230px",
        label: {
          show: true,
          position: "inside",
          formatter: function (params: any) {
            var item = data.find((item) => item.name === params.name);
            // return Math.round((item!.value / 150) * 100) + "% ";
            return Math.round(params.percent) + "%";
          },
          color: "white",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: data,
      },
    ],
  };
  mychart.setOption(option);
});
</script>

<style lang="scss" scoped>
.container-age {
  margin: 10px 0px 0px 20px;
  background: url(../../images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;
  // border: 1px solid cadetblue;
  .top {
    position: relative;
    // border: 1px solid red;
    height: 60px;
    .title {
      color: white;
      font-size: 20px;
    }
    .deco {
      background: url(../../images/dataScreen-title.png);
      display: inline-block;
      width: 68px;
      height: 7px;
    }
  }
}
</style>
